<template>
    <view class="financialManagement">
        <view class="tabs">
            <u-tabs :scrollable="false" :list="list" @click="on_tab"></u-tabs>
        </view>
        <view class="content">
            <view v-if="pageIndex == 0">
                <view class="inputValueBox">
                    <u--input focus v-model="valueData" customStyle="background: #fff;" @confirm="on_confirm(1)"
                        shape="circle" border="true" :adjustPosition="false" fontSize="14px" placeholder="用户ID/昵称/姓名/手机号"
                        prefixIcon="search" prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
                </view>
                <view class="ul" v-for="item in dataList" :key="item.id">
                    <div class="li">
                        <div class="name">用户ID：</div>
                        <div class="contentValue">{{ item.user_id }}</div>
                    </div>
                    <div class="li">
                        <div class="name">手机号：</div>
                        <div class="contentValue">{{ item.user_mobile }}</div>
                    </div>

                    <div class="li">
                        <div class="name">积分来源：</div>
                        <div class="contentValue">{{ item.source_type }}</div>
                    </div>
                    <div class="li">
                        <div class="name">变动总数：</div>
                        <div class="contentValue">{{ item.change_amount }}</div>
                    </div>
                    <div class="li">
                        <div class="name">剩余总数：</div>
                        <div class="contentValue">{{ item.left_amount }}</div>
                    </div>
                    <div class="li">
                        <div class="name">后台操作人：</div>
                        <div class="contentValue">{{ item.operator }}</div>
                    </div>
                    <div class="li liTwo">
                        <div class="name">订单号：</div>
                        <div class="contentValue">{{ item.log_sn }}</div>
                    </div>
                    <div class="li liTwo">
                        <div class="name">说明：</div>
                        <div class="contentValue">{{ item.remark }}</div>
                    </div>

                </view>

            </view>
            <view v-if="pageIndex == 1">
                <view class="inputValueBox">
                    <u--input focus v-model="valueDataTwo" customStyle="background: #F2F4F4;" @confirm="on_confirm(2)"
                        shape="circle" border="true" :adjustPosition="false" fontSize="14px" placeholder="用户ID/手机号码/来源单号"
                        prefixIcon="search" prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
                </view>
                <view class="title">当前用户总余额：{{ all_money }}</view>
                <view class="ul" v-for="item in dataList" :key="item.id">
                    <div class="li">
                        <div class="name">用户ID：</div>
                        <div class="contentValue">{{ item.user_id }}</div>
                    </div>
                    <div class="li">
                        <div class="name">用户昵称：</div>
                        <div class="contentValue">{{ item.nickname }}</div>
                    </div>
                    <div class="li">
                        <div class="name">姓名：</div>
                        <div class="contentValue">{{ item.alipay_name }}</div>
                    </div>
                    <div class="li">
                        <div class="name">手机号：</div>
                        <div class="contentValue">{{ item.mobile }}</div>
                    </div>


                    <div class="li">
                        <div class="name">明细：</div>
                        <div class="contentValue">{{ item.source_type }}</div>
                    </div>
                    <div class="li">
                        <div class="name">金额：</div>
                        <div class="contentValue">{{ item.change_amount }}</div>
                    </div>
                    <div class="li">
                        <div class="name">剩余金额：</div>
                        <div class="contentValue">{{ item.left_amount }}</div>
                    </div>
                    <div class="li ">
                        <div class="name">申请时间：</div>
                        <div class="contentValue">{{ item.addtime }}</div>
                    </div>
                    <div class="li liTwo">
                        <div class="name">流水号：</div>
                        <div class="contentValue">{{ item.log_sn }}</div>
                    </div>

                    <div class="li liTwo">
                        <div class="name">备注信息：</div>
                        <div class="contentValue">{{ item.remark }} </div>
                    </div>

                    <div class="li">
                        <div class="name">来源单号：</div>
                        <div class="contentValue">{{ item.source_sn }}</div>
                    </div>
                </view>
            </view>

            <view class="pagination" v-if="total">
                <uni-pagination @change="on_change" :total="total"></uni-pagination>
                <view class="example">
                    <text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
                </view>
            </view>

            <view v-if="dataList.length <= 0" class="noData">请搜索数据</view>

        </view>
        <u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)"
            :loading="loadingType"></u-loading-page>
    </view>
</template>

<script>
export default {
    data() {
        return {
            loadingType: false,
            valueDataTwo: '',
            valueData: '',
            pageIndex: 0,
            list: [
                {
                    name: '积分明细'
                },
                {
                    name: '余额明细'
                }
            ],
            dataList: [],
            page: 1,
            total: 0,
            all_money: 0
        };
    },
    onShow() {
        if (this.pageIndex == 0) {
            this.ajax_pointsDetails()
        } else {
            this.ajax_userBalanceList()
        }
    },
    methods: {
        on_change(page) {
            this.page = page.current;
            if (this.pageIndex == 0) {
                this.ajax_pointsDetails()
            }
            else {
                this.ajax_userBalanceList()
            }
        },
        on_tab(e) {
            this.page = 1;
            if (e.index == 0) {
                this.ajax_pointsDetails()
            } else {
                this.ajax_userBalanceList()
            }
            this.pageIndex = e.index
        },
        on_confirm(index) {
            if (index == 1) {
                this.ajax_pointsDetails()
            }
            if (index == 2) {
                this.ajax_userBalanceList()
            }
        },
        // 积分明细
        ajax_pointsDetails() {
            this.loadingType = true;
            this.$request.request({
                url: 'mobile/integralMsg',
                method: 'POST',
                data: {
                    page: this.page,
                    value: this.valueData
                }
            }).then(res => {
                this.dataList = res.data.data.data
                this.total = res.data.data.total
            }).finally(() => {
                this.loadingType = false;
            })
        },
        // 余额明细
        ajax_userBalanceList() {
            this.loadingType = true;
            this.$request.request({
                url: 'mobile/MoneyMsg',
                method: 'POST',
                data: {
                    page: this.page,
                    value: this.valueDataTwo
                }
            }).then(res => {
                this.dataList = res.data.data.list.data
                this.total = res.data.data.list.total
                this.all_money = res.data.data.all_money
            }).finally(() => {
                this.loadingType = false;
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.financialManagement {
    .content {
        padding: 20rpx;

        .title {
            margin: 30rpx 0 0 0;
            font-weight: 700;
        }



        .ul:nth-last-child(1) {
            border-bottom: none;
        }

        .ul {
            margin-top: 20rpx;
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 20rpx;

            .li {
                margin-top: 20rpx;
                width: 50%;

                .contentValue {
                    margin-top: 6rpx;
                }
            }

            .li:nth-child(1) {
                margin-top: 0;
            }

            .li:nth-child(2) {
                margin-top: 0;
            }

            .liTwo {
                width: 100% !important;
            }
        }
    }
}
</style>